<html>
<head>
    <title>用房查询</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    {#   引入bootstrap#}
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    {#    引入 echarts.js#}
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    {#    引入MDUI>#}
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
    {#        引入jQuery#}
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .mdui-table-fluid .mdui-table thead tr th {
            text-align: center;
            vertical-align: middle !important;
            font-size: larger;
        }

        .mdui-table-fluid .mdui-table tbody tr th {
            text-align: center;
            vertical-align: middle !important;
            font-size: medium;
        }
    </style>
</head>

<body style="padding-top: 50px;background-color: ghostwhite">

{#导航栏#}
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation" style="margin:0px">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">信息管理</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/udo/query">用户信息</a></li>
                <li><a href="/udo/roomsquery">用房查询</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        行为相关<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/ado/query">地点设置</a></li>
                        <li><a href="#">嘻嘻</a></li>
                        <li><a href="#">嘻嘻嘻</a></li>
                        <li class="divider"></li>
                        <li><a href="#">嘻嘻嘻嘻</a></li>
                        <li class="divider"></li>
                        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登陆/注册</a></li>
            </ul>

        </div>

    </div>
</nav>

{#住房查询#}
<div style="margin-right: 100px;margin-left: 100px">
    <div class="mdui-table-fluid">
        <table class="mdui-table mdui-table-hoverable">
            <thead>
            <tr>
                <th>已预定房间号</th>
            </tr>
            </thead>
            <tbody>
            {% for room in room_list %}
                <tr>
                    <th>{{ room.address }}</th>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <br>

</div>
</body>
</html>
